focus
|
С |
|
|
|
|
|||||||||
|
7.0 |
8.0 |
9.0 |
7.0 |
8.0 |
9.6 |
10.0 |
10.0 |
3.1 |
4.0 |
5.0 |
3.0 |
3.6 |
4.0 |
|
Помилка |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Коротка інформація
|
CSS |
CSS2 |
|
Застосовується |
До
елементів, які можуть отримати фокус (<A>, <INPUT>,
<SELECT> і <TEXTAREA>) |
|
Аналог
HTML |
<тег
onfocus="function()"> |
|
Посилання
на специфікацію |
http://www.w
3.org/TR/CSS21/selector.html#dynamic - pseudo - classes |
Опис
Псевдоклас
focus визначає стиль для елементу одержуючого фокус. Наприклад, їм може бути
текстове поле форми, в яке встановлюється курсор.
Синтаксис
елемент:
focus {.. }
Значення
Ні.
Приклад
HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows - 1251">
<title>focus</title>
<style type="text/css">
#enter .label {
width: 80px; /* Ширина блоку з текстом */
float: left; /* Розташування в один рядок
з полем */
text - align: right; /* Вирівнювання по
правому краю */
}
#enter .form - text {
width: 240px; /* Ширина поля */
margin - left: 10px; /* Відстань між полем
і текстом */
border: 1px solid #abadb3; /* Рамка
навколо текстового поля */
padding: 2px; /* Полів навколо тексту */
}
#enter .form - item {
margin - bottom: 5px; /* Відступ знизу */
}
#enter .form - text: focus {
background: #ffe; /* Колір фону */
border: 1px solid #29B0D9; /* Параметрів
рамки */
}
#enter p {
margin - left: 90px; /* Зрушення управо */
}
</style>
</head>
<body>
<form action="login.php"
method="post" id="enter">
<div class="form-item">
<span
class="label">Логін:</span>
<span
class="field"><input type="text" id="login"
value="" class="form-text"></span>
</div>
<div class="form-item">
<span
class="label">Пароль:</span>
<span
class="field"><input type="password"
id="pass" class="form-text"></span>
</div>
<p><input type="submit"
value="Увійти"></p>
</form>
</body>
</html>
Результат
цього прикладу показаний на мал. 1. При отриманні фокусу текстове поле міняє
колір фону і колір межі.
Мал. 1.
Результат використання псевдокласу focus
